﻿@namespace Aspire.Dashboard.Components

@using Aspire.Dashboard.Otlp.Model
@using Aspire.Dashboard.Resources
@using Metrics = Aspire.Dashboard.Components.Pages.Metrics
@inject IStringLocalizer<ControlsStrings> Loc

@if (_instrument is null)
{
    <div>@Loc[nameof(ControlsStrings.ChartContainerUnableToDisplay)]</div>
}
else
{
    <div class="metrics-chart">
        <div class="metrics-chart-header">
            <h3>@_instrument.Summary.Name</h3>
            <p>@_instrument.Summary.Description</p>

            @if (_instrument.HasOverflow)
            {
                <div class="block-warning">
                    <div class="block-warning-icon">
                        <FluentIcon Value="new Icons.Filled.Size16.ErrorCircle()" Color="Color.Error" />
                    </div>

                    <div class="block-warning-message">
                        <span class="title">@Loc[nameof(ControlsStrings.ChartContainerOverflowTitle)]</span>
                        @Loc[nameof(ControlsStrings.ChartContainerOverflowDescription)]<br/>
                        @((MarkupString)string.Format(ControlsStrings.ChartContainerOverflowLink, "https://aka.ms/dotnet/aspire/cardinality-limits"))
                    </div>
                </div>
            }
        </div>
        <FluentTabs ActiveTabId="@($"tab-{ActiveView}")" OnTabChange="@OnTabChangeAsync" Size="null">
            <FluentTab LabelClass="tab-label"
                       Id="@($"tab-{Metrics.MetricViewKind.Graph}")"
                       aria-label="@Loc[nameof(ControlsStrings.ChartContainerGraphAccessibleLabel)]"
                       Label="@Loc[nameof(ControlsStrings.ChartContainerGraphTab)]"
                       Icon="@(new Icons.Regular.Size24.DataArea())">
                <div class="metrics-chart-container metric-tab">
                    <PlotlyChart InstrumentViewModel="_instrumentViewModel" Duration="Duration" Resources="Resources"/>
                    <ChartFilters InstrumentViewModel="_instrumentViewModel" Instrument="_instrument" DimensionFilters="@DimensionFilters" />
                </div>
            </FluentTab>
            <FluentTab LabelClass="tab-label"
                       Id="@($"tab-{Metrics.MetricViewKind.Table}")"
                       Label="@Loc[nameof(ControlsStrings.ChartContainerTableTab)]"
                       Icon="@(new Icons.Regular.Size24.Table())">
                <div class="metrics-chart-container metric-tab">
                    <MetricTable InstrumentViewModel="_instrumentViewModel" Duration="Duration" Resources="Resources" />
                    <ChartFilters InstrumentViewModel="_instrumentViewModel" Instrument="_instrument" DimensionFilters="@DimensionFilters"/>
                </div>
            </FluentTab>
        </FluentTabs>
        <div class="metrics-chart-footer">
            @if (PauseText is not null)
            {
                <PauseWarning PauseText="@PauseText" />
            }
        </div>
    </div>
}
